feat(Breadcrumb): add `color` prop by maximepvrt · Pull Request #6406 · nuxt/ui

maximepvrt · 2026-04-28T11:59:40Z

🔗 Linked issue

Resolves #3052

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

coderabbitai · 2026-04-28T12:03:06Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds an optional color prop to BreadcrumbProps and passes it into the component's variant generation so variant classes can reflect the chosen color. The breadcrumb theme removes hard-coded primary focus/text classes, introduces a color variant (including neutral), and adds compound variants to set text-{color} for active items and focus-visible:outline-{color}. The Nuxt playground was updated to select colors and bind props to UBreadcrumb via a Matrix; documentation shows a color: 'secondary' example. A unit test was added covering color: 'neutral'.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(Breadcrumb): add `color` prop' clearly and concisely summarizes the main change: adding a color prop to the Breadcrumb component.
Linked Issues check	✅ Passed	The PR fully implements the requirements from issue `#3052`: adds a color prop to UBreadcrumb with behavior similar to NavigationMenu, allowing color changes for the active breadcrumb item.
Out of Scope Changes check	✅ Passed	All changes are in scope: Breadcrumb component color prop implementation, theme updates, documentation, playground example, and test coverage—all directly support the linked issue objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description is minimal and lacks detail, but the linked issue provides clear context about adding a color prop to UBreadcrumb, and the changeset directly addresses this objective.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-04-28T13:39:17Z

npm i https://pkg.pr.new/@nuxt/ui@6406

commit: 51192b4

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/runtime/components/Breadcrumb.vue`:
- Around line 93-95: Breadcrumb.vue defines a prop named ui (BreadcrumbProps)
and also declares a local computed const ui = ... which causes a duplicate key
error; rename the computed from ui to uiTv (change const ui = computed(...) to
const uiTv = computed(...)) and then update every usage: replace all template
expressions calling ui.*() with uiTv.*(), and replace all slot bindings :ui="ui"
with :ui="uiTv" (ensure every occurrence in the template where ui is
referenced—calls at the tv helper and slot bindings—is updated).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 898d2893-4a12-4775-839c-672f7164edde

📥 Commits

Reviewing files that changed from the base of the PR and between c68c919 and 7b1dd30.

📒 Files selected for processing (1)

src/runtime/components/Breadcrumb.vue

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/theme/breadcrumb.ts`:
- Around line 45-57: The compound-variant generation in breadcrumb.ts may
produce two matching variants for color: 'neutral' + active: true because the
spread maps options.theme.colors and then adds an explicit neutral variant;
update the generation in the map for (options.theme.colors || []) to skip/filter
out 'neutral' (or deduplicate the resulting array) so only the explicit neutral
variant remains; reference the map expression that builds variants and the
explicit object with color: 'neutral', active: true, class: { link:
'text-highlighted' } when making the change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 35c71719-c1c7-41ef-9241-6b24e323c2d4

📥 Commits

Reviewing files that changed from the base of the PR and between 7b1dd30 and 51192b4.

⛔ Files ignored due to path filters (2)

test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap is excluded by !**/*.snap
test/components/__snapshots__/Breadcrumb.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (4)

playgrounds/nuxt/app/pages/components/breadcrumb.vue
src/runtime/components/Breadcrumb.vue
src/theme/breadcrumb.ts
test/components/Breadcrumb.spec.ts

✅ Files skipped from review due to trivial changes (1)

src/runtime/components/Breadcrumb.vue

🚧 Files skipped from review as they are similar to previous changes (1)

test/components/Breadcrumb.spec.ts

benjamincanac

Thanks! 😊

feat(breadcrumb): add color props

79d6e90

maximepvrt requested a review from benjamincanac as a code owner April 28, 2026 11:59

github-actions Bot added the v4 #4488 label Apr 28, 2026

vercel Bot deployed to Preview – ui April 28, 2026 12:12 View deployment

lint

9f43f54

vercel Bot deployed to Preview – ui April 28, 2026 12:33 View deployment

benjamincanac changed the title ~~feat(breadcrumb): add color props~~ feat(Breadcrumb): add color prop Apr 28, 2026

fix

c68c919

vercel Bot deployed to Preview – ui April 28, 2026 13:41 View deployment

Merge branch 'v4' into breadcrumb-color

7b1dd30

coderabbitai Bot reviewed May 5, 2026

View reviewed changes

Comment thread src/runtime/components/Breadcrumb.vue

vercel Bot deployed to Preview – ui May 5, 2026 14:07 View deployment

chore: minor clean

51192b4

coderabbitai Bot reviewed May 5, 2026

View reviewed changes

Comment thread src/theme/breadcrumb.ts

benjamincanac approved these changes May 5, 2026

View reviewed changes

vercel Bot deployed to Preview – ui May 5, 2026 14:22 View deployment

benjamincanac merged commit 955dac1 into nuxt:v4 May 5, 2026
20 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Breadcrumb): add `color` prop#6406

feat(Breadcrumb): add `color` prop#6406
benjamincanac merged 5 commits intonuxt:v4from
maximepvrt:breadcrumb-color

maximepvrt commented Apr 28, 2026 •

edited by benjamincanac

Loading

Uh oh!

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

Reviews paused

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

benjamincanac left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

maximepvrt commented Apr 28, 2026 • edited by benjamincanac Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

coderabbitai Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

benjamincanac left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

maximepvrt commented Apr 28, 2026 •

edited by benjamincanac

Loading

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 28, 2026 •

edited

Loading